<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%@ taglib prefix="pagination-bootstrap" tagdir="/WEB-INF/tags"%>


<c:url var="addProductToExpenseHeader" value="/accounting/expenses/addProductToExpenseHeader"></c:url>

<script type="text/javascript">
$(document).ready(function() { 
	$('#group-society-gnDivision-division-district').change(
			function() {
				$.getJSON('${getAllDivisionsJSONByDistrictIdURL}', {
					districtId : $(this).val(),
					ajax : 'true'
				}, function(data) {
					var html = '<option value="0"></option>';
					var len = data.length;
					for ( var i = 0; i < len; i++) {
						html += '<option value="' + data[i].id + '">' + data[i].name + '</option>';
					}
					html += '</option>';
	 
					$('#group-society-gnDivision-division').html(html);
					$('#group-society-gnDivision').html("");
					$('#group-society').html("");
					$("#group-society-gnDivision-division").trigger("liszt:updated");
				});
			});
	$('#product-search').click(
		function(){
			window.location.href = "<%=request.getContextPath()%>" + "/accounting/expenses/add?expenseId=" + $("#expenseId").val();
		}
	);
});

function addProductToExpenseHeader(productId){
	var strProductUnitPriceId = "#product_" + productId + "_unit_price";
	var strProductQuantityId = "#product_" + productId + "_quantity";
	$("#productId").val(productId);
	$("#unitPrice").val($(strProductUnitPriceId).val());
	$("#quantity").val($(strProductQuantityId).val());
	$.post('${addProductToExpenseHeader}', {
		productId : productId,
		unitPrice: $("#unitPrice").val(),
		quantity: $("#quantity").val(),
		expenseId: $("#expenseId").val(),
		ajax : 'true'
	}, function(data) {
		//alert(data);
	}, 'json');
	$('#ajax-product-added').css('display', 'block');
	$('#ajax-product-added').fadeOut(5000, function() {
	    // Animation complete.
	});
}
</script>
<ul class="breadcrumb">
  <li><a href="#">Home</a> <span class="divider">>></span></li>
  <li><a href="#">Library</a> <span class="divider">>></span></li>
  <li class="active">Data</li>
</ul>
<ul class="nav nav-tabs">
  <li class="active"><a href="javascript:void(0)" id="product-search">Product search</a></li>
  <li><a href="#">View expense</a></li>
</ul>
<div class="alert alert-success" style="display: none;" id="ajax-product-added">
  Product has been added to expense  
</div>
<div class="alert alert-info">
  <table style="width: 100%">
    <tr>
      <td width="50%">Item count:${addProductToExpenseHeaderForm.itemCount}</td>
      <td width="50%" align="right">Total:${addProductToExpenseHeaderForm.expenseTotal}</td>
    </tr>
  </table>
</div>
<form:form action="addProductToExpenseHeader" method="post" modelAttribute="addProductToExpenseHeaderForm">
  <form:hidden path="expenseId" />
  <form:hidden path="productId" />
  <form:hidden path="unitPrice" />
  <form:hidden path="quantity" />
  <table class="table table-bordered table-condensed">
    <tr>
      <th>Unit price</th>
      <th>Quantity</th>
      <th>Name</th>
      <th>Description</th>
      <th>Action</th>
    </tr>
    <c:forEach items="${pager.resultSet}" var="model">
      <tr>
        <td style="vertical-align: middle;"><input id="product_${model.id}_unit_price" class="input-mini" type="text" placeholder="Unit price"></td>
        <td style="vertical-align: middle;"><input id="product_${model.id}_quantity" class="input-mini" type="text" placeholder="Quantity"></td>
        <td style="vertical-align: middle;">${model.name}</td>
        <td style="vertical-align: middle;">${model.shortDescription}</td>
        <td style="vertical-align: middle;"><a href="javascript:void(0)"><img src="<%=request.getContextPath()%>/images/shop-cart-add-icon.png" onclick="addProductToExpenseHeader('${model.id}')"></img></a></td>
      </tr>
    </c:forEach>
  </table>
</form:form>
<pagination-bootstrap:pagination-bootstrap pager="${pager}" />